<template>
  <div class="template">
    <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.mchId"
            placeholder="请输入商户号"
            style="width: 150px; margin-left: 10px"
            icon="ios-search"
            ></Input>
        </div>
         <div class="search-item">
            <Select clearable
                style="width:100px;margin-left:10px"
            v-model="search.status"
            :label-in-value="true"
            placeholder="状态"
            class="select"
            >
                <Option value="0" label="禁用"></Option>
                <Option value="1" label="启用"></Option>
            </Select>
        </div>

         <div class="search-item">
            <Select clearable
                style="width:150px;margin-left:10px"
            v-model="search.organization"
            :label-in-value="true"
            placeholder="机构"
            class="select"
            >
                <Option value="wx" label="微信"></Option>
                <Option value="ali" label="支付宝"></Option>
                <Option value="tiktok" label="抖音"></Option>
            </Select>
         </div>
         <div class="search-item">
            <Select clearable
                style="width:150px;margin-left:10px"
                v-model="search.source"
                :label-in-value="true"
                placeholder="来源"
                class="select"
            >
                <Option value="HL" label="汇联"></Option>
                <Option value="OFFICE" label="官方"></Option>
            </Select>
         </div>

        <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          @click="searchFn"
          >查询</Button
        >
         <Button style="width: 80px;margin-bottom:5px" @click="clearFn">重置</Button>
      </div>
    </div>
    <div class="filter">
        <div class="filter-center">
            <Button
          style="margin-right: 10px"
          type="primary"
          icon="ios-add"
           @click="addMerchant()"
          >新增</Button
        >
        </div>

    </div>

    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

   <Modal
        v-model="diyDom.showModal"
        title="编辑商户号">
          <Form ref="addForm"  :model="form" :rules="diyData.rules"  :label-width="100">
            <FormItem label="商户号">
                 <Input clearable
                    v-model="form.mchId"
                    placeholder="请输入商户号"
                    style="width: 300px; margin-left: 10px"
                    ></Input>
            </FormItem>
            <FormItem label="状态">
                 <Select clearable
                style="width:300px;margin-left:10px"
            v-model="form.status"
            :label-in-value="true"
            placeholder="状态"
            class="select"
            >
                <Option value="0" label="禁用"></Option>
                <Option value="1" label="启用"></Option>
            </Select>
            </FormItem>
            <FormItem label="机构">
            <Select clearable
                style="width:300px;margin-left:10px"
            v-model="form.organization"
            :label-in-value="true"
            placeholder="机构"
            class="select"
            >
                <Option value="wx" label="微信"></Option>
                <Option value="ali" label="支付宝"></Option>
                <!--<Option value="tiktok" label="抖音"></Option> -->
            </Select>
            </FormItem>
            <FormItem label="来源">
             <Select clearable
                style="width:300px;margin-left:10px"
                v-model="form.source"
                :label-in-value="true"
                placeholder="来源"
                class="select"
            >
                <Option value="HL" label="汇联"></Option>
                <Option value="OFFICE" label="官方"></Option>
                 <!-- <Option value="H5" label="H5"></Option> -->
            </Select>
            </FormItem>
            <template  v-if="form.organization=='wx'&&form.source=='OFFICE'">
              <FormItem label="支付秘钥">
              <Input clearable
                      v-model="form.payKey"
                      placeholder="请输入支付秘钥"
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
              <FormItem label="证书密码">
              <Input clearable
                      v-model="form.certPwd"
                      placeholder="请输入证书密码"
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
              <FormItem label="证书地址">
                  <Input clearable
                      v-model="form.certName"
                      placeholder="请输入证书地址"
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
              <FormItem label="appId">
                  <Input clearable
                      v-model="form.appId"
                      placeholder="请输入appId"
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
              <FormItem label="客户端">
                 <Select clearable
                style="width:300px;margin-left:10px"
                v-model="form.clientId"
                :label-in-value="true"
                placeholder="客户端"
                class="select"
            >
                <Option value="1003" label="微信小程序"></Option>
                <Option value="1008" label="微信公众号"></Option>
            </Select>
              </FormItem>
            </template>
            <template  v-if="form.organization=='ali'&&form.source=='OFFICE'">
              <FormItem label="公钥：">
              <Input clearable
                      v-model="form.publicKey"
                      placeholder="请输入支付公钥"
                      type="textarea"                      
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
              <FormItem label="私钥：">
              <Input clearable
                      v-model="form.privateKey"
                      type="textarea"    
                      placeholder="请输入私钥"
                      style="width: 300px; margin-left: 10px"
                      ></Input>
              </FormItem>
            </template>
            <FormItem label="汇联渠道" v-if="form.source=='HL'">
                <Select clearable
                style="width:300px;margin-left:10px"
                v-model="form.providerType"
                :label-in-value="true"
                placeholder="来源"
                class="select"
            >
                <Option value="09" label="合利宝1"></Option>
                <Option value="011" label="合利宝2"></Option>
                <Option value="012" label="合利宝3"></Option>
                <Option value="016" label="乐刷"></Option>
            </Select>
            </FormItem>
            <FormItem label="权重">
            <Input clearable
                    v-model="form.weight"
                    placeholder="请输入权重"
                    style="width: 300px; margin-left: 10px"
                    ></Input>
            </FormItem>
            <FormItem label="备注">
            <Input clearable
                    v-model="form.comment"
                    placeholder="请输入备注"
                    type="textarea"
                    style="width: 300px; margin-left: 10px"
                    ></Input>
            </FormItem>            
        </Form>
        <div slot="footer">
                <Button style="width: 90px" @click="modalCancel()">返回</Button>
                <Button type="primary" style="width: 90px; margin-left: 20px" @click="submit" >保存</Button>
            </div>
    </Modal>

  </div>
</template>

<script>
import {
  apiPaymerchantList,apiPaymerchantDelete,apiPaymerchantInfo,apiPaymerchantSave,apiPaymerchantUpdate
} from '@/api/merchant-manage.js'
export default {
  name: 'merchant-manage',
  data () {
    return {
      query: {},
      search: {
        weight: '',
        status: '',
        source: '',
        param: '',
        organization:'',
        mchId:'',
        comment:'',
        pageNo: 1,
        pageSize: 10
      },
      form:{
         certName: '',
        certPwd: '',
        comment: '',
        mchId: '',
        organization:'',
        payKey:'',
        providerType:'',
        source:'',
        status:'',
        weight:'',
        privateKey:'',
        publicKey:'',
        appId:'',
        clientId:'',
      },
      diyDom: {
        showModal: false,
      },
      diyData: {
        id: '',
        columns: [
          {
            title: '商户号',
            key: 'mchId'
          },

          {
            title: '机构',
            key: 'organization',
            render: (h, params) => {
             
              return h('div',params.row.organization=='wx'?'微信':params.row.organization=='ali'?'支付宝':'抖音')
            }
          },

          {
            title: '来源',
            key: 'source',
             render: (h, params) => {
                return h('div',params.row.source=='HL'?'汇联':'官方')
             }
          },
          // {
          //   title: '汇联渠道',
          //   width: 180,
          //   key: 'providerType',
          //   render: (h, params) => {
          //       return h('div',params.row.providerType=='09'?'合利宝1':params.row.providerType=='011'?'合利宝2':params.row.providerType=='012'?'合利宝3':params.row.providerType=='016'?'乐刷':'')
          //    }
          // },
          {
            title: '权重',
            key: 'weight',
           
          },
          {
            title: '状态',
            key: 'status',
            render: (h, params) => {
                return h('span',{
                  style: {
                    color:'#fff',
                    background:params.row.status=='1'?'#2d8cf0':'#e5e5e5',
                    padding:'4px 10px',
                  }
                },params.row.status=='1'?'正常':'停用')
             }
          },
          {
            title: '备注',
            key: 'comment',
           
          },
          {
            title: '创建时间',
            key: 'createTime',
           
          },

          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.diyData.id = params.row.id
                        this.getDetail(params.row.id)
                        
                      }
                    }
                  },
                  '编辑'
                ),
 
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '提示',
                          content: '是否确认删除当前数据?',
                          onOk: () => {
                            apiPaymerchantDelete({ ids: params.row.id }).then(() => {
                              this.$Message.success('删除成功')
                              this.getTableList()
                            })
                          }
                        })
                      }
                    }
                  },
                  '删除'
                )])
            }
          }
        ]
      },
      apiData: {
        total: 0,
        invoicingName: '',
        taxNumber: '',
        tableList: []
      }
    }
  },

  computed: {
  },
  methods: {
    addMerchant () {
      this.diyData.id = ''
      this.diyDom.showModal = true
    },
    // 获取详情
    getDetail (id) {
      apiPaymerchantInfo({ id: id })
        .then(res => {
            var {
                comment,mchId,status,weight,source,organization,param,publicKey,privateKey,appId,clientId
            }=res.data.info
            
            this.form={
                certName:JSON.parse(param).certName,
                certPwd:JSON.parse(param).certPwd,
                comment: comment,
                mchId: mchId,
                organization:organization,
                payKey:JSON.parse(param).payKey,
                providerType:JSON.parse(param).providerType,
                source:source,
                status:status+'',
                weight:weight,
                privateKey:JSON.parse(param).privateKey||'',
                publicKey:JSON.parse(param).publicKey||'',
                appId:appId+'',
                clientId:clientId+'',
            }
            this.diyDom.showModal = true
        })
    },
    // 获取表格数据
    getTableList () {
      this.$store.commit('setSpinShow', true)
      apiPaymerchantList({ ...this.search })
        .then((res) => {
          const {
            list,
            totalCount
          } = res.data
          this.apiData.tableList = list
          this.apiData.total = totalCount
        })
        .finally(() => this.$store.commit('setSpinShow', false))
    },
    // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    },
    // 清空
    clearFn () {
      this.search = {
        name: '',
        phone: '',
        title: '',
        status: '',
        pageNo: 1,
        pageSize: 10
      }
      this.getTableList()
    },

    modalCancel(){
        this.form={
         certName: '',
        certPwd: '',
        comment: '',
        mchId: '',
        organization:'',
        payKey:'',
        providerType:'',
        source:'',
        status:'',
        weight:'',
      }
      this.diyData.id=''
      this.diyDom.showModal=false
    },

    submit(){
        if(this.diyData.id){
            apiPaymerchantUpdate({ ...this.form,id:this.diyData.id }).then(res=>{
                this.$Message.success('编辑成功')
                this.modalCancel()
                this.searchFn()
            })
        }else{
             apiPaymerchantSave({ ...this.form}).then(res=>{
                this.$Message.success('新增成功')
                this.modalCancel()
                 this.searchFn()
            })
        }
    },

  },
  mounted () {
    this.getTableList()
  },
  activated () {
    this.getTableList()
  }
}
</script>

<style scoped lang="less">

</style>
